<template>
    <div class="modify_name">
        <div class="inp_txt">
            <div class="inp">
                <span class="f26">修改昵称</span>
                <input type="text" name="" id="" v-model="newName" @change="changeInp()" :placeholder="names">
            </div>
        </div>
        <div class="btn">
            <button @click="amend()">保存</button>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'modifyName',
        data() {
            return {
                names: '',
                newName: ''
            }
        },
        methods: {
            getName() {
                this.names = this.$route.query.name
            },
            changeInp() {
                this.newName = this.newName.replace(/\s+/g, '')
            },
            amend() {
                if(this.newName.replace(/\s+/g, '') !== ''){
                    let params = {
                        userId: this.$store.state.userId,
                        userName: this.newName
                    }
                    this.$http.fetchGet('updateName', params).then(res => {
                        if(res.code == 200) {
                            this.$vux.toast.text('修改成功')
                            this.$router.push({
                                path: '/datum'
                            })
                        } else {
                            this.$vux.toast.text('修改失败')
                        }
                    }, err =>{
                        console.log(err)
                    })
                }
            }
        },
        mounted() {
            this.getName()
        }
    }
</script>

<style lang="less" scoped>
    .modify_name {
        box-sizing: border-box;
        .inp_txt{
            box-sizing: border-box;
            width: 100%;
            .padd(0, 20);
            .h(88);
            .lh(88);
            .inp{
                position: relative;
                box-sizing: border-box;
                width: 100%; 
                border-bottom: 1px solid #f2f2f2;
                .pl(140);
                span{
                    position: absolute;
                    left: 10px;
                    color: #020202;
                    .lh(90);
                }
                input{
                    width: 100%;
                    .h(84);
                    border: none;
                    color: #999;
                    .pl(10);
                    &:focus {
                        outline:none;
                        border: 0px solid #fff;
                    }
                }
            }
        }
        .btn{
            width: 100%;
            .padd(0, 40);
            box-sizing: border-box;
            position: absolute;
            top: 50%;
            transform:translateY(-50%);
            button{
                width: 100%;
                .h(88);
                border: none;
                border-radius: 5px;
                color: #fff;
                background: #189BEB;
            }
        }
    }
    
</style>
